<script setup lang="ts">
import { Page } from '@vben/common-ui';

import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { useVbenForm } from '#/adapter/form';
import { getMaliConfig, postMaliTest, putMaliConfig } from '#/api/admin/mail';

const loading = ref<boolean>(true);
const currentTab = ref(0);
const handleTest = async (values: any) => {
  const { msg } = await postMaliTest(values);
  message.success(msg);
};

async function onSubmit(values: any) {
  const { msg } = await putMaliConfig(values);
  message.success(msg);
}

function onSecondReset() {
  currentTab.value = 0;
}

const [TestForm, testFormApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  handleReset: onSecondReset,
  handleSubmit: handleTest,
  layout: 'horizontal',
  resetButtonOptions: {
    content: $t("admin.Edit Email Settings")
  },
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'to',
      label: $t("admin.Recipient Email"),
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'subject',
      label: $t("page.common.Title"),
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'content',
      label: $t("page.common.Content"),
      rules: 'required',
    },
  ],
});

const [FirstForm, formApi] = useVbenForm({
  handleSubmit: onSubmit,
  layout: 'vertical',
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  handleReset: (values: Record<string, any>) => {
    formApi.validate().then((res) => {
      if (res.valid) {
        currentTab.value = 1;
        // console.log(values);
        testFormApi.setValues(values);
      }
    });
  },
  resetButtonOptions: {
    content: $t("admin.Test Email"),
  },
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'from_name',
      label: $t('admin.Sender'),
      rules: 'required',
    },
    // {
    //   component: 'Input',
    //   componentProps: {
    //     placeholder: '请输入',
    //   },
    //   fieldName: 'from',
    //   label: '邮箱地址',
    //   rules: 'required',
    // },
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'host',
      label: $t('admin.SMTP Server'),
      rules: 'required',
    },
    {
      component: 'Select',
      componentProps: {
        options: [
          { label: 'tls', value: 'tls' },
          { label: 'ssl', value: 'ssl' },
          { label: '默认', value: '' },
        ],
        placeholder: $t('page.common.Please Select'),
      },
      fieldName: 'smtp_secure',
      label: $t('admin.Connection Type'),
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'port',
      label: $t('admin.SMTP Port'),
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'username',
      label: $t('admin.Email Account'),
      rules: 'required',
    },
    {
      component: 'InputPassword',
      componentProps: {
        placeholder: $t('page.common.Please Enter'),
      },
      fieldName: 'password',
      label: $t('admin.Email Authorization Code'),
      rules: 'required',
    },
  ],
});

const onGetMailConfig = async () => {
  const { data } = await getMaliConfig();
  if (data.config) {
    formApi.setValues(data.config);
  } else {
    formApi.setValues({
      smtp_secure: 'ssl',
    });
  }

  loading.value = false;
};

onMounted(async () => {
  await onGetMailConfig();
});
</script>

<template>
  <Page>
    <FirstForm v-show="currentTab === 0" />
    <TestForm v-show="currentTab === 1" />
  </Page>
</template>
